<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="../libraries/RGraph.drawing.text.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A basic example of the drawing API text object being used as a button to switch between charts</title>

    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A basic example of the drawing API text object being used as a button to switch between charts" />
     
</head>
<body>
        
    <h1>A basic example of the drawing API text object being used as a button to switch between charts</h1>

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

    <script>
        $(document).ready(function ()
        {
            var canvas = document.getElementById('cvs');
            
            /**
            * Draw the Line chart when the page loads
            */
            drawLine();


            /**
            * Draw the line chart
            */
            function drawLine ()
            {
                RGraph.Reset(canvas);
    
                var line = new RGraph.Line({
                    id: 'cvs',
                    data: [4,8,6,3,5,2,6],
                    options: {
                        labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                        hmargin: 5,
                        linewidth: 5
                    }
                }).draw()
                
                
                drawButtons();
            }




            
            
            /**
            * Draw the Bar chart
            */
            function drawBar ()
            {
                RGraph.reset(canvas);
    
                var bar = new RGraph.Bar({
                    id: 'cvs',
                    data: [4,8,6,3,5,2,6],
                    options: {
                        labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                        colors: ['Gradient(white:blue)']
                    }
                }).draw()
                    
                drawButtons();
            }




            /**
            * Draw the buttons (using the drawing API text object).
            */
            function drawButtons ()
            {
                var text1 = new RGraph.Drawing.Text({
                    id: 'cvs',
                    x: 600 - 25 - 5,
                    y: 25 + 5,
                    text: 'Line chart',
                    options: {
                        font: 'Arial',
                        size: 14,
                        bounding: {
                            self: true,
                            fill: 'white',
                            shadow: {
                                self: true,
                                color: '#666',
                                offsetx: 1,
                                offsety: 1
                            }
                        },
                        halign: 'right',
                        valign: 'top',
                        colors: ['blue']
                    }
                }).on('click', function (e, shape)
                {
                    drawLine();
                }).draw()




                var text2 = new RGraph.Drawing.Text({
                    id: 'cvs',
                    x: 600 - 25 - 5 - 5 - text1.coords[0][2],
                    y: 25 + 5,
                    text: 'Bar chart',
                    options: {
                        font: 'Arial',
                        size: 14,
                        bounding: {
                            self: true,
                            fill: 'white',
                            shadow: {
                                self: true,
                                color: '#666',
                                offsetx: 1,
                                offsety: 1
                            }
                        },
                        halign: 'right',
                        valign: 'top',
                        colors: ['blue']
                    }
                }).on('click', function (e, shape)
                {
                    drawBar();
                }).draw()




                
                text1.onmousemove =
                text2.onmousemove = function (e, shape)
                {
                    e.target.style.cursor = 'pointer';
                }
            }
        });
    </script>


    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>